import { createUseStyles } from "react-jss";

const useDropdownStyles = createUseStyles({
  item: {
    position: "relative",
    boxSizing: "border-box",
    transition: "margin-bottom .3s linear 17ms",
  },
  labelText: {
    color: "rgb(153, 153, 153)",
    marginRight: "10px",
  },
  itemLabel: {
    display: "flex",
    alignItems: "center",
    backgroundColor: "#fff",
    borderRadius: "4px",
    color: "#333",
    cursor: "pointer",
    height: "24px",
    maxWidth: "232px",
    minWidth: "135px",
    overflow: "hidden",
    padding: "0 8px",
    whiteSpace: "nowrap",
    width: "auto",
    border: "1px solid white",
    "&:hover": {
      color: "#0177d7",
    },
  },
  blueText: {
    color: "#0177d7",
  },
  itemShadow: {
    boxShadow: "0 0 4px 0 #d0d7df",
  },
  itemBorder: {
    border: "1px solid #d0d7df",
  },
  caretDownIcon: {
    fontSize: "8px",
    display: "flex",
    alignItems: "center",
    marginLeft: "5px",
  },
  calendarIcon: {
    display: "flex",
    alignItems: "center",
    marginLeft: "5px",
  },
  closeIcon: {
    display: "flex",
    alignItems: "center",
    marginLeft: "5px",
    fontSize: "17px",
  },
  flexGrow: {
    flexGrow: 1,
  },
  valueText: {
    overflow: "hidden",
    textOverflow: "ellipsis",
  },
  valueCount: {
    backgroundColor: "#0177D7",
    borderRadius: "2px",
    color: "#fff",
    marginLeft: "5px",
    padding: "0 2px",
  },
});

export { useDropdownStyles };
